<template>
  <view class="add-feedback-container">
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="navigateBack">
        <FeatherIcon name="chevron-left" size="24" color="#333"></FeatherIcon>
      </view>
      <text class="navbar-title">问题反馈</text>
      <view class="navbar-right"></view>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 标题输入 -->
      <view class="form-item">
        <text class="form-label">问题标题 <text class="required">*</text></text>
        <view class="input-wrapper">
          <input
            class="form-input"
            type="text"
            v-model="formData.title"
            placeholder="请简要描述您遇到的问题"
            maxlength="50"
            confirm-type="next"
          />
          <text class="input-counter">{{ formData.title.length }}/50</text>
        </view>
      </view>

      <!-- 内容输入 -->
      <view class="form-item">
        <text class="form-label">问题描述 <text class="required">*</text></text>
        <view class="textarea-wrapper">
          <textarea
            class="form-textarea"
            v-model="formData.content"
            placeholder="请详细描述问题发生的场景、步骤和现象，有助于我们快速定位并解决问题"
            maxlength="500"
            auto-height
          />
          <text class="input-counter">{{ formData.content.length }}/500</text>
        </view>
      </view>

      <!-- 设备信息 -->
      <view class="form-item">
        <view class="device-info-header">
          <text class="form-label">设备信息</text>
          <switch
            :checked="includeDeviceInfo"
            @change="handleSwitchChange"
            color="#ff9800"
            style="transform: scale(0.8)"
          />
        </view>

        <view class="device-info-preview" v-if="includeDeviceInfo">
          <view class="device-item">
            <text class="device-label">设备型号:</text>
            <text class="device-value">{{ deviceInfo.model }}</text>
          </view>
          <view class="device-item">
            <text class="device-label">系统版本:</text>
            <text class="device-value">{{ deviceInfo.system }}</text>
          </view>
          <view class="device-item">
            <text class="device-label">APP版本:</text>
            <text class="device-value">{{ deviceInfo.appVersion }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-button-wrapper">
      <button
        class="submit-button"
        @click="submitFeedback"
        :disabled="isSubmitting"
      >
        {{ isSubmitting ? "提交中..." : "提交反馈" }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import {
  showLoading,
  hideLoading,
  showSuccess,
  showError,
} from "@/utils/common";
import { submitFeedback as submitFeedbackApi } from "@/api";
import { isLoggedIn } from "@/api";
import { getAppVersion } from "@/config/app";

// 表单数据
const formData = reactive({
  title: "",
  content: "",
  device: "",
  appVersion: getAppVersion(),
  userId: "",
});

// 是否包含设备信息
const includeDeviceInfo = ref(true);
// 设备信息
const deviceInfo = reactive({
  model: "",
  system: "",
  appVersion: getAppVersion(),
});
// 用户信息
const userInfo = ref(null);
// 提交状态
const isSubmitting = ref(false);

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取用户信息从缓存
const getUserInfoFromStorage = () => {
  try {
    const userInfoStr = uni.getStorageSync("userInfo");
    if (userInfoStr) {
      userInfo.value = JSON.parse(userInfoStr);
      if (userInfo.value && userInfo.value.oId) {
        formData.userId = userInfo.value.oId;
      }
    }
  } catch (e) {
    console.error("获取用户信息失败:", e);
  }
};

// 获取设备信息
const getDeviceInformation = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    deviceInfo.model = systemInfo.model || systemInfo.deviceModel || "未知设备";
    deviceInfo.system = systemInfo.system || "未知系统";
    deviceInfo.appVersion = getAppVersion();

    // 合并设备信息为一个字符串
    updateDeviceInfoString();
  } catch (e) {
    console.error("获取设备信息失败:", e);
  }
};

// 更新设备信息字符串
const updateDeviceInfoString = () => {
  if (includeDeviceInfo.value) {
    formData.device = `设备: ${deviceInfo.model}, 系统: ${deviceInfo.system}`;
    formData.appVersion = deviceInfo.appVersion;
  } else {
    formData.device = "";
    formData.appVersion = "";
  }
};

// 处理设备信息开关变化
const handleSwitchChange = (e) => {
  includeDeviceInfo.value = e.detail.value;
  updateDeviceInfoString();
};

// 提交反馈
const submitFeedback = async () => {
  // 表单验证
  if (!formData.title.trim()) {
    showError("请输入问题标题");
    return;
  }

  if (!formData.content.trim()) {
    showError("请输入问题描述");
    return;
  }

  isSubmitting.value = true;
  showLoading("提交中");

  try {
    // 更新设备信息
    updateDeviceInfoString();

    // 提交反馈
    const response = await submitFeedbackApi(formData);

    if (response && response.feedbackId) {
      showSuccess("反馈提交成功");

      // 返回前设置一个标记，表示需要刷新列表
      try {
        uni.setStorageSync("feedback_list_need_refresh", "true");
      } catch (e) {
        console.error("设置刷新标记失败", e);
      }

      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      showError("提交失败，请稍后重试");
    }
  } catch (error) {
    console.error("提交反馈失败:", error);
    showError("提交失败，请稍后重试");
  } finally {
    hideLoading();
    isSubmitting.value = false;
  }
};

onMounted(() => {
  if (isLoggedIn()) {
    getUserInfoFromStorage();
    getDeviceInformation();
  } else {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  }
});
</script>

<style lang="scss">
.add-feedback-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 999;
  padding-top: 80rpx;
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;

  .navbar-left {
    width: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .navbar-right {
    width: 90rpx;
  }
}

.form-container {
  padding: calc(var(--status-bar-height, 25px) + 44px + 40rpx) 30rpx 150rpx;
}

.form-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .form-label {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
    display: block;

    .required {
      color: #ff5252;
    }
  }

  .input-wrapper {
    position: relative;

    .form-input {
      height: 80rpx;
      background-color: #f8f9fa;
      border-radius: 10rpx;
      padding: 0 24rpx;
      font-size: 28rpx;
      color: #333;
    }

    .input-counter {
      position: absolute;
      bottom: 10rpx;
      right: 24rpx;
      font-size: 24rpx;
      color: #999;
    }
  }

  .textarea-wrapper {
    position: relative;

    .form-textarea {
      width: auto;
      min-height: 200rpx;
      background-color: #f8f9fa;
      border-radius: 10rpx;
      padding: 20rpx 24rpx;
      font-size: 28rpx;
      color: #333;
    }

    .input-counter {
      position: absolute;
      bottom: 10rpx;
      right: 24rpx;
      font-size: 24rpx;
      color: #999;
    }
  }

  .device-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .device-info-preview {
    margin-top: 20rpx;
    background-color: #f8f9fa;
    border-radius: 10rpx;
    padding: 20rpx;

    .device-item {
      display: flex;
      font-size: 26rpx;
      margin-bottom: 10rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .device-label {
        color: #999;
        min-width: 140rpx;
      }

      .device-value {
        color: #666;
        flex: 1;
      }
    }
  }
}

.submit-button-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 45rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
  border: none;

  &:after {
    border: none;
  }

  &[disabled] {
    background: linear-gradient(135deg, #ffb74d, #ff8a65);
    opacity: 0.7;
  }
}
</style>
